<template>
	<view class="videoPaly">
		<video 
		:id="'myVideo'+video.id" 
		class="video"  
		:loop="true"
		:src="'http://localhost:8888/htdocs/video/'+video.src" 
		:controls="false"
		@click="click"
		muted
		></video>
		<!-- muted -->
		<!-- :autoplay="autoplay" -->
	</view>
</template>

<script>
	var timer=null
	export default{
		props:["video"],
		data(){
			return{
				videoContext:"",
				play:false,
				doubleClick:false,
				// autoplay:false
			}
		},
		watch:{
			video(){
				console.log(this.video)
			}
			
		},
		onReady(){
			this.videoContext=uni.createVideoContext(`myVideo${this.video.id}`)
		},
// 		created(){
// 			this.auto()
// 		},
		methods:{
// 			auto(){
// 				if(this.video.id===1){
// 					this.autoplay=true
// 				}
// 			},
			click(){
				clearTimeout(timer)
				this.doubleClick=!this.doubleClick
				timer=setTimeout(()=>{
					if(this.doubleClick){
						if(this.play===false){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						this.$emit("changeLover")
					}
					this.doubleClick=false
				},300)
				
			},
			player(){
				this.videoContext=uni.createVideoContext(`myVideo${this.video.id}`,this)
				if(this.play===false){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play=true
				}
				
			},
			pause(){
				this.videoContext=uni.createVideoContext(`myVideo${this.video.id}`,this)
				if(this.play===true){
					this.videoContext.seek(0)
					this.videoContext.pause()
					this.play=false
				}
				
			},
			playThis(){
				this.videoContext=uni.createVideoContext(`myVideo${this.video.id}`,this)
				if(this.play===false){
					this.videoContext.play()
					this.play=true
				}
			}
		}
	}
</script>

<style >
	.videoPaly{
		height: 100%;
		width: 100%;
	}
	.video{
		height: 100%;
		width: 100%;
	}
</style>
